<template>
  <view class="follow-video">
    <view class="author-view">
      <image class="author-avatar" :src="this.baseURL + video.avatar" />
      <view class="author-name">{{ video.author }}</view>
      <view class=""> </view>
    </view>
    <view class="video-view">
      <view class="video-title">{{ video.title }} </view>
      <view class="video-view-content">
        <video
          :id="'video-' + video.id"
          class="video-content"
          :src="this.baseURL + '/static/video/' + video.src"
          controls
          ref="videoPlayer"
          objectFit="cover"
          @play="onPlay"
          @loadedmetadata="onLoadedMetadata"
          @error="onVideoError"
          @click="playToPage"
        ></video>
        <view
          class="soundTipItem mute-tip fade-in"
          :id="'soundTip-' + video.id"
          :class="{ 'tw-hidden': !soundTipVisible }"
          @click="openVolume"
        >
          <i
            class="iconfont icon-volume-off icon-box"
            :style="{ color: '#fff', fontSize: '20px' }"
          ></i>
          <span class="text-sm font-medium">点击开启声音</span>
        </view>
      </view>
    </view>
    <view class="action">
      <video-action :videoLength="video.videoLength" />
    </view>
    <view class="comment-view">
      <view class="comment-title">{{ video.commentCount }} 条评论</view>
      <follow-comment
        :videoId="video.id"
        ref="followCommentRef"
      ></follow-comment>
      <view class="comment-list-more" @click="handleMoreComment">
        查看更多评论
      </view>
      <view class="comment-input">
        <view class="comment-input-icon tw-pr-2">
          <i class="iconfont icon-edit-pen icon-box"></i>
        </view>
        <input
          class="custom-dark comment-input-input"
          maxlength="200"
          placeholder="写下你的评论"
          v-model="customComment"
        />
      </view>
    </view>
  </view>
</template>

<script>
  import videoAction from "./video-action.vue";
  import followComment from "./follow-comment.vue";
  import { playerPage } from "@/API/pageConst";
  export default {
    name: "FollowVideo",
    components: {
      videoAction,
      followComment,
    },
    props: {
      video: {
        type: Object,
        default: () => ({
          avatar: "",
          author: "",
          title: "",
          src: "1.mp4",
          videoLength: "00:00",
          collectCount: 0,
          commentCount: 0,
          shareCount: 0,
          date: "",
          desc: "",
          id: 0,
          likeCount: 0,
          music: "",
          musicCover: "",
        }),
      },
      index: {
        type: Number,
      },
    },
    data() {
      return {
        fillData: "文字".repeat(200),
        iconSize: 14,
        likeColor: "#f8f8f8",
        customComment: "",
        // videoEl: null,
        soundTipVisible: true, // 控制声音提示显示状态
        isLoaded: false, // 视频是否加载完成
      };
    },
    methods: {
      playToPage() {
        uni.setStorageSync("follow:video", this.video);
        uni.navigateTo({
          url: playerPage,
        });
      },
      handleMoreComment() {},
      onLoadedMetadata() {
        this.isLoaded = true;
      },
      onVideoError(e) {
        console.error("视频播放错误：", e.detail.errMsg);
      },
      onPlay(e) {
        this.soundTipVisible = false;
      },
      initVideoContext() {
        this.$nextTick(() => {
          const videoId = "video-" + this.video.id;
          // #ifdef H5
          const videoContextEl = document.getElementById(videoId);
          this.videoEl = videoContextEl.querySelector("video");
          // #endif
          // #ifdef MP-WEIXIN
          this.videoEl = uni.createVideoContext(videoId);

          // #endif
          // this.firstPlay();
        });
      },
      openVolume() {
        this.$emit("toggleSoundAll");
        // #ifdef H5
        if (this.videoEl.paused) {
          this.playVideo();
        }
        // #endif
        this.soundTipVisible = false;
        // #ifdef MP-WEIXIN
        this.videoEl.play();
        // #endif
      },
      playVideo() {
        if (!this.videoEl) return;
        // #ifdef H5
        if (this.videoEl.muted) {
          this.soundTip.classList.remove("tw-hidden");
          this.videoEl || (this.videoEl.muted = false);
        }
        this.videoEl.play().catch((err) => {
          console.log("自动播放失败，等待用户交互:", err);
          this.soundTip.classList.remove("tw-hidden");
          this.videoEl.muted = true;
          this.videoEl.play().catch((err) => {
            console.log("再次播放失败，等待用户交互:", err);
            this.soundTip.classList.remove("tw-hidden");
          });
        });
        // #endif
        // #ifdef MP-WEIXIN
        try {
          if (this.isLoaded && this.videoEl) {
            this.videoEl.play();
          }
        } catch (e) {
          console.error("播放失败", e);
        }

        // #endif
      },
      firstPlay() {
        if (this.index === 0) {
          this.playVideo();
        }
      },
      pauseVideo() {
        console.log("pauseVideo");
        this.videoEl.pause();
        this.soundTip.classList.add("tw-hidden");
      },
    },
    mounted() {
      this.$refs.followCommentRef.loadComment(); // 初始加载评论
      this.initVideoContext();
    },
    watch: {
      "video.id": {
        handler(newId, oldId) {
          if (oldId && newId !== oldId) {
            this.$refs.followCommentRef.loadComment(); // 当 videoId 改变时重新加载评论
          }
          this.firstPlay();
        },
        immediate: true,
      },
    },
  };
</script>

<style>
  .soundTipItem {
    position: absolute;
    bottom: 16px;
    right: 10px;
    padding: 8px 16px;
    border-radius: 9999px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1)) /* #e2e8f0 */;
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur)
      var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
      var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
      var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
      var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
      var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
      var(--tw-backdrop-sepia);
  }
  .tw-hidden {
    display: none;
  }
  .icon-box {
    font-size: 14px;
  }
  .comment-view {
    font-size: 14px;
  }
  .follow-video {
    padding-right: 20px;
    padding-left: 20px;
    background-color: #171827;
    border-bottom: 1px solid #9889899c;
    max-width: 540px;
  }
  .author-view {
    display: flex;
    padding: 10px 0;
    align-items: center;
  }
  .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #777;
  }
  .video-view {
    margin-top: 5px;
  }
  .video-view .video-title {
    margin: 10px 0;
    height: 1.5em;
    line-height: 1.5em;
    max-width: 100%;
    text-overflow: ellipsis;
    width: 100%;
  }
  .video-view-content {
    position: relative;
  }
  .video-content {
    width: 90vw;
    height: 300px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .video-action {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    gap: 5px;
    margin-bottom: 6px;
  }
  .comment-input {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
  }
  .custom-dark {
    --el-color-primary: #409eff;
    --el-bg-color: #141414;
    --el-bg-color-page: #0a0a0a;
    --el-input-bg-color: #171827;
    --el-input-text-color: #fff;
    --el-input-border-color: #333;
    --el-fill-color-blank: #333;
  }
  .comment-input-input {
    width: 100%;
    background-color: #171827;
    padding: 0 10px;
  }
  .comment-list-more {
    margin: 10px 0;
  }
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
    .text-shadow {
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    .animate-pulse-slow {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  } */
</style>
